<template>
  <div class="home">
    <div class="header-bar">
      <div class="title">
        <h1>基于社会行为数据城市认知系统</h1>
      </div>
      <div class="main">
         <div class="main-tab">
           <div v-for="item in tabList" :key="item.id" @click="changeTab(item)" :class="{'active':item.id==current}">
             {{item.title}}
           </div>
          </div>
          <div class="tab-con">
            
            <div v-if="current == 1"></div>

            <div class="main-box" v-if="current == 2">
              <router-link :to="{path:'/'+item.url, query:{id:item.id}}" v-for="(item,index) in cityActionList" :key="index" tag="div">
                <div class="box-name">
                 {{item.name}}
                </div>
                <p class="box-con">{{item.content}}</p>
              </router-link>
            </div>
            <div class="main-box" v-if="current == 3">
              <router-link :to="{path:'/'+item.url, query:{id:item.id}}" v-for="(item,index) in cityPlanList" :key="index" tag="div" @click.native="changeModule">
                <div class="box-name">
                  {{item.name}}
                </div>
                <p class="box-con">{{item.content}}</p>
              </router-link>
            </div>




          </div>
        
      </div>
      
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'home',
  data(){
    return {
      current:1,
      tabList:[
        {id:1,title:'城市画像子系统'},
        {id:2,title:'城市行为认知子系统'},
        {id:3,title:'城市规划管理应用子系统'}
      ],
      cityActionList:[
        {id:1,name:'个体行为空间预测模型',url:'individualBehavior', content: '1'},
        {id:2,name:'群体动态分析聚类模型',url:'populationDynamics', content: '2'},
        {id:3,name:'横向数据关联挖掘模型',url:'horizontalData', content: '3'},
        {id:4,name:'纵向行为时间序列预测模型',url:'directionData', content: '4'},
      ],
      cityPlanList:[
        {id:1,name:'区域联系',url:'region', content: '基于互联网定位数据和工商注册法人投资数据等社会行为数据，对全国19个城市群的人口联系和资本联系进行监测和评价。'},
        {id:2,name:'人口分布',url:'population', content: '基于手机信令数据等社会行为数据，对区域人口的空间分布、时序变化、时空变化进行监测、评价与预测。'},
        {id:3,name:'职住特征',url:'occupation', content: '基于手机信令数据、出租车轨迹数据等社会行为数据，对区域居住/就业人口、区域通勤特征进行监测与预测，基于群体动态分析模型进行职住功能分区。'},
        {id:4,name:'交通特征',url:'traffic', content: '基于出租车轨迹数据、公交地铁刷卡数据、共享单车轨迹数据等社会行为数据，对区域出租车、地铁、公交、共享单车进行时空监测，基于横向关联挖掘模型识别交通运输危险区域，基于轨迹预测模型预测出租车形式路径，基于路况预测模型预测未来路况。'},
        {id:5,name:'地块功能',url:'block', content: '基于遥感影像数据和设施兴趣点（POI）数据，对区域土地利用和设施分布时空变化进行监测和评价。'}
      ],
      moduleList:[
        {id:1,name:'通州',url:'tongzhou'},
        {id:2,name:'亦庄',url:'yizhuang'},
        {id:3,name:'数据',url:'datas'},
        {id:4,name:'模型',url:'models'}
      ]
      
    }
  },
  methods: {
    changeTab(item){
      this.current = item.id;
    },
    changeModule(){
      // 改变菜单状态
      this.$store.dispatch("changeMenu", String(this.$route.query.id));
    }
  }
}
</script>

<style lang="stylus">
.home{width: 100%;height:100%;}
.header-bar
    height 100%
    position relative
    border-top 2px solid #00f6ff
    background #282c38
    
  .title
    height 60px
    width 580px
    background url('../assets/img/logo_bg.png') no-repeat
    background-size 100% 100%
    position absolute
    z-index 1
    left 50%
    top -2px
    margin-left -302.5px

    h1
      letter-spacing 2px
      line-height 64px
      font-size 24px
      color #fff
      margin 0 auto
      text-align center    
.main
  position relative
  margin-top 113px
  height calc(100% - 110px)

  .main-tab
    display flex
    justify-content space-around

  .main-tab
    >div
      background rgb(57,87,125)
      width 240px
      height 40px
      line-height 40px
      text-align center
      border-radius 5px
      cursor pointer
      font-weight bold
      color rgb(127,127,127)

  .main-tab > div:hover
  .main-tab > div.active
      color #fff
      cursor pointer
      
  .main-box
    position absolute
    top 35px
    bottom 0
    width 100%
    height 100%
    display flex
    overflow hidden

  .main-box > div
    flex 1
    // margin 左右的值保持一致
    margin 100px 30px
    background rgba(0,0,0,.3) url(../assets/img/timg.jpg)
    opacity .5
    transition .5s
    box-shadow 5px 5px 5px rgba(0,0,0,.5)
    cursor pointer

  .main-box > div:hover
    margin 80px 30px
    opacity 1

.box-name 
  text-align center
  margin 50px 0

.box-name
  background rgb(38,54,94)
  color #fff
  font-size 26px
  text-decoration none
  padding 5px 10px

.box-con
  text-indent 50px 


</style>
